Sliders

Dropdowns & Advanced Elements

<h1>Sliders in Selenium WebDriver</h1>

<p>A slider is a graphical user interface (GUI) component that allows users to select or adjust a value by moving a handle along a horizontal or vertical track. Sliders are commonly used in modern web applications for selecting price ranges, volume, brightness, ratings, dates, quantities, percentages, distances, and other numerical values.</p>

<p>In Selenium WebDriver automation, sliders require special handling because the slider value may change through mouse movement, keyboard interaction, JavaScript events, or custom JavaScript-based components. Selenium provides the <strong>Actions</strong> class, keyboard actions, WebElement methods, and JavaScriptExecutor to automate different types of sliders.</p>

<p><strong>Course Resource:</strong> <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">Selenium Training Course</a> | <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a></p>

<hr>

<h2>1. What is a Slider?</h2>

<p>A slider is an interactive UI element that allows a user to select a value by dragging a slider handle from one position to another. The selected value usually changes according to the position of the handle.</p>

<p>A simple slider can contain three main components:</p>

<ul>

<li><strong>Track:</strong> The complete area along which the handle moves.</li>

<li><strong>Handle:</strong> The movable element that the user drags.</li>

<li><strong>Value:</strong> The number or state selected by the slider.</li>

</ul>

<hr>

<h2>2. Real-World Examples of Sliders</h2>

<ul>

<li>Price range selector in e-commerce websites</li>

<li>Volume control in media applications</li>

<li>Brightness control</li>

<li>Age selection</li>

<li>Percentage selection</li>

<li>Distance selection</li>

<li>Rating adjustment</li>

<li>Quantity selection</li>

<li>Zoom level selection</li>

<li>Date and time range selection</li>

</ul>

<hr>

<h2>3. Why Do We Automate Sliders?</h2>

<p>Sliders are frequently used in modern web applications, and their behavior should be verified during automation testing.</p>

<ul>

<li>To verify that the slider can be moved correctly.</li>

<li>To verify minimum and maximum values.</li>

<li>To verify step values.</li>

<li>To verify the selected value.</li>

<li>To verify keyboard accessibility.</li>

<li>To verify dynamic results after changing the slider.</li>

<li>To verify price filtering.</li>

<li>To verify range selection.</li>

</ul>

<hr>

<h2>4. Basic Slider Automation Flow</h2>

<pre><code>Open Web Application

Locate Slider

Identify Slider Type

+-------------------+

| |

v v

HTML Range Slider Custom Slider

| |

v v

Keyboard / Actions Mouse / JS

| |

+---------+---------+

Change Slider Value

Read Selected Value

Validate

Pass</code></pre>

<hr>

<h2>5. Types of Sliders</h2>

<p>Sliders can be categorized based on their HTML implementation and behavior.</p>

<tr><th>Slider Type</th><th>Description</th><th>Common Automation Method</th></tr>

<tr><td>HTML Range Slider</td><td>Uses input type range</td><td>Keyboard, Actions, JavaScript</td></tr>

<tr><td>Custom Slider</td><td>Created using div/span elements</td><td>Actions class</td></tr>

<tr><td>Range Slider</td><td>Contains two handles</td><td>Mouse drag / keyboard</td></tr>

<tr><td>Vertical Slider</td><td>Moves vertically</td><td>Actions class</td></tr>

<tr><td>Horizontal Slider</td><td>Moves horizontally</td><td>Actions class</td></tr>

<tr><td>Dynamic Slider</td><td>Updates another UI element</td><td>Actions + Explicit Wait</td></tr>

<tr><td>JavaScript Slider</td><td>Value controlled through JavaScript</td><td>JavaScriptExecutor</td></tr>

</table>

<hr>

<h2>6. Basic HTML Slider</h2>

<p>The simplest HTML slider is created using the <code><input type="range"></code> element.</p>

<ul>

<li><code>type="range"</code> defines the slider.</li>

<li><code>id="volume"</code> identifies the element.</li>

<li><code>min="0"</code> defines the minimum value.</li>

<li><code>max="100"</code> defines the maximum value.</li>

<li><code>value="50"</code> defines the initial value.</li>

</ul>

<hr>

<h2>7. Important Slider Attributes</h2>

<tr><th>Attribute</th><th>Purpose</th></tr>

<tr><td>type</td><td>Defines the slider as a range input.</td></tr>

<tr><td>min</td><td>Defines the minimum allowed value.</td></tr>

<tr><td>max</td><td>Defines the maximum allowed value.</td></tr>

<tr><td>value</td><td>Defines the current value.</td></tr>

<tr><td>step</td><td>Defines the increment or decrement amount.</td></tr>

<tr><td>id</td><td>Provides a unique locator.</td></tr>

<tr><td>class</td><td>Can be used for CSS selectors.</td></tr>

<tr><td>aria-valuenow</td><td>Can represent the current accessible value.</td></tr>

</table>

<hr>

<h2>8. Locating a Slider Using ID</h2>

<pre><code>WebElement slider = driver.findElement(By.id("volume"));</code></pre>

<p>If the slider has a unique ID, using ID is generally a straightforward locator strategy.</p>

<hr>

<h2>9. Locating a Slider Using CSS Selector</h2>

<pre><code>WebElement slider = driver.findElement(By.cssSelector("input[type='range']"));</code></pre>

<p>CSS selectors are useful when the slider does not have a unique ID.</p>

<hr>

<h2>10. Locating a Slider Using XPath</h2>

<pre><code>WebElement slider = driver.findElement(By.xpath("//input[@type='range']"));</code></pre>

<hr>

<h2>11. Reading the Current Slider Value</h2>

<p>For a standard HTML range input, the current value can usually be obtained using the <code>value</code> attribute.</p>

<pre><code>String value = slider.getAttribute("value");

System.out.println("Slider Value: " + value);</code></pre>

<hr>

<h2>12. Reading Minimum and Maximum Values</h2>

<pre><code>String min = slider.getAttribute("min");

String max = slider.getAttribute("max");

System.out.println("Minimum: " + min);

System.out.println("Maximum: " + max);</code></pre>

<hr>

<h2>13. Reading the Step Value</h2>

<pre><code>String step = slider.getAttribute("step");

System.out.println("Step: " + step);</code></pre>

<p>The step attribute determines how much the slider changes when the user presses an arrow key or performs a supported increment/decrement action.</p>

<hr>

<h2>14. Moving a Slider Using Keyboard</h2>

<p>Keyboard interaction is one of the easiest approaches for a standard HTML range slider.</p>

<pre><code>slider.click();

slider.sendKeys(Keys.ARROW_RIGHT);</code></pre>

<p>The right arrow generally increases the value, while the left arrow generally decreases it.</p>

<hr>

<h2>15. Increasing Slider Value Multiple Times</h2>

<pre><code>slider.click();

for (int i = 0; i < 5; i++) {

slider.sendKeys(Keys.ARROW_RIGHT);

}</code></pre>

<p>This approach is useful when the slider has a known step size.</p>

<hr>

<h2>16. Decreasing Slider Value</h2>

<pre><code>slider.click();

for (int i = 0; i < 5; i++) {

slider.sendKeys(Keys.ARROW_LEFT);

}</code></pre>

<hr>

<h2>17. Moving Slider to Minimum</h2>

<p>For many native range sliders, the Home key can move the value to its minimum.</p>

<pre><code>slider.click();

slider.sendKeys(Keys.HOME);</code></pre>

<hr>

<h2>18. Moving Slider to Maximum</h2>

<p>The End key can move many native range sliders to their maximum value.</p>

<pre><code>slider.click();

slider.sendKeys(Keys.END);</code></pre>

<hr>

<h2>19. Validating the Minimum Value</h2>

<pre><code>slider.click();

slider.sendKeys(Keys.HOME);

String value = slider.getAttribute("value");

Assert.assertEquals(value, "0");</code></pre>

<hr>

<h2>20. Validating the Maximum Value</h2>

<pre><code>slider.click();

slider.sendKeys(Keys.END);

String value = slider.getAttribute("value");

Assert.assertEquals(value, "100");</code></pre>

<hr>

<h2>21. Moving Slider Using Actions Class</h2>

<p>The Selenium <code>Actions</code> class is useful when a slider needs mouse-based interaction.</p>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(slider)

.moveByOffset(100, 0)

.release()

.perform();</code></pre>

<p>The second argument of <code>moveByOffset()</code> controls vertical movement.</p>

<hr>

<h2>22. Understanding moveByOffset()</h2>

<pre><code>actions.clickAndHold(slider)

.moveByOffset(100, 0)

.release()

.perform();</code></pre>

<ul>

<li><code>100</code> = horizontal movement.</li>

<li><code>0</code> = vertical movement.</li>

</ul>

<p>For a horizontal slider, the Y offset usually remains zero.</p>

<hr>

<h2>23. Moving a Slider to the Right</h2>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(slider)

.moveByOffset(120, 0)

.release()

.perform();</code></pre>

<hr>

<h2>24. Moving a Slider to the Left</h2>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(slider)

.moveByOffset(-80, 0)

.release()

.perform();</code></pre>

<hr>

<h2>25. Dragging a Slider Using dragAndDropBy()</h2>

<pre><code>Actions actions = new Actions(driver);

actions.dragAndDropBy(slider, 100, 0).perform();</code></pre>

<p>This method attempts to drag the slider by the specified X and Y offsets.</p>

<hr>

<h2>26. Horizontal Slider Automation</h2>

<p>Horizontal sliders move from left to right.</p>

<pre><code>actions.clickAndHold(slider)

.moveByOffset(150, 0)

.release()

.perform();</code></pre>

<hr>

<h2>27. Vertical Slider Automation</h2>

<p>Vertical sliders move from top to bottom or bottom to top depending on their implementation.</p>

<pre><code>actions.clickAndHold(slider)

.moveByOffset(0, 100)

.release()

.perform();</code></pre>

<hr>

<h2>28. Keyboard vs Mouse Slider Automation</h2>

<tr><th>Method</th><th>Advantages</th><th>Limitations</th></tr>

<tr><td>Keyboard</td><td>Simple and precise</td><td>Works best with native controls</td></tr>

<tr><td>Actions</td><td>Useful for custom UI sliders</td><td>Offset calculation can be difficult</td></tr>

<tr><td>JavaScript</td><td>Can directly change values</td><td>May not reproduce real user behavior</td></tr>

<tr><td>Click and Drag</td><td>Similar to real mouse interaction</td><td>Can be sensitive to UI dimensions</td></tr>

</table>

<hr>

<h2>29. Why Slider Automation Can Be Difficult</h2>

<p>Unlike normal buttons or text fields, sliders depend on coordinates, element dimensions, JavaScript events, keyboard events, and the relationship between pixel position and value.</p>

<p>For example:</p>

<pre><code>Slider Width = 500 pixels

Minimum Value = 0

Maximum Value = 100

Approximate Value Per Pixel = 100 / 500

= 0.2</code></pre>

<p>Therefore, a movement of 100 pixels may represent approximately 20 value units in this simplified example.</p>

<hr>

<h2>30. Slider Step Value</h2>

<p>Consider a slider with:</p>

<pre><code>min = 0

max = 100

step = 10</code></pre>

<p>The possible values may be:</p>

<p>Automation should verify that invalid intermediate values cannot be selected when the UI is designed to restrict values to those steps.</p>

<hr>

<h2>31. Testing Slider Boundaries</h2>

<p>Boundary testing is important for sliders.</p>

<ul>

<li>Minimum value</li>

<li>Minimum + step</li>

<li>Middle value</li>

<li>Maximum - step</li>

<li>Maximum value</li>

</ul>

<hr>

<h2>32. Slider Boundary Test Example</h2>

<pre><code>slider.click();

slider.sendKeys(Keys.HOME);

Assert.assertEquals(slider.getAttribute("value"), "0");

slider.sendKeys(Keys.END);

Assert.assertEquals(slider.getAttribute("value"), "100");</code></pre>

<hr>

<h2>33. Testing a Slider with Step 5</h2>

<pre><code>String step = slider.getAttribute("step");

Assert.assertEquals(step, "5");</code></pre>

<p>Then the automation script can verify that keyboard interaction changes the value according to the configured step.</p>

<hr>

<h2>34. Custom Sliders</h2>

<p>Many modern websites do not use the native HTML range input. Instead, they create custom sliders using elements such as <code>div</code>, <code>span</code>, CSS, JavaScript, and ARIA attributes.</p>

</div></code></pre>

<p>For these sliders, locating the handle rather than the entire container is often necessary.</p>

<hr>

<h2>35. Locating a Custom Slider Handle</h2>

<pre><code>WebElement handle = driver.findElement(

By.cssSelector(".slider-handle")

);</code></pre>

<hr>

<h2>36. Dragging a Custom Slider Handle</h2>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(handle)

.moveByOffset(100, 0)

.release()

.perform();</code></pre>

<hr>

<h2>37. Slider Track vs Slider Handle</h2>

<tr><th>Element</th><th>Purpose</th></tr>

<tr><td>Track</td><td>Defines the complete movement area.</td></tr>

<tr><td>Handle</td><td>Movable control used to select the value.</td></tr>

<tr><td>Value Label</td><td>Displays the selected value.</td></tr>

<tr><td>Tooltip</td><td>May display the value during movement.</td></tr>

</table>

<hr>

<h2>38. Finding Slider Dimensions</h2>

<p>Selenium can retrieve the size of a slider.</p>

<pre><code>Dimension size = slider.getSize();

System.out.println("Width: " + size.getWidth());

System.out.println("Height: " + size.getHeight());</code></pre>

<hr>

<h2>39. Finding Slider Location</h2>

<pre><code>Point location = slider.getLocation();

System.out.println("X: " + location.getX());

System.out.println("Y: " + location.getY());</code></pre>

<hr>

<h2>40. Finding Slider Rectangle</h2>

<pre><code>Rectangle rect = slider.getRect();

System.out.println("X: " + rect.getX());

System.out.println("Y: " + rect.getY());

System.out.println("Width: " + rect.getWidth());

System.out.println("Height: " + rect.getHeight());</code></pre>

<hr>

<h2>41. Calculating Slider Position</h2>

<p>For a custom slider, the approximate position can be calculated using:</p>

<pre><code>position = (value - min) / (max - min) * sliderWidth</code></pre>

<p>For example:</p>

<pre><code>min = 0

max = 100

value = 50

width = 400

position = (50 - 0) / (100 - 0) * 400

= 200 pixels</code></pre>

<hr>

<h2>42. JavaScriptExecutor and Sliders</h2>

<p>JavaScriptExecutor can be useful when directly interacting with a native range element is more reliable than mouse movement.</p>

<pre><code>JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(

"arguments[0].value='80';",

slider

);</code></pre>

<p>However, directly changing the DOM property may not trigger all application-specific events. For realistic end-to-end behavior, native keyboard or mouse interaction is often preferable when it works reliably.</p>

<hr>

<h2>43. Triggering JavaScript Events</h2>

<p>Some applications listen for input or change events. In such cases, changing only the value property may not update the application state.</p>

<pre><code>JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(

"arguments[0].value='80';" +

"arguments[0].dispatchEvent(new Event('input', {bubbles:true}));" +

"arguments[0].dispatchEvent(new Event('change', {bubbles:true}));",

slider

);</code></pre>

<hr>

<h2>44. When to Use JavaScriptExecutor</h2>

<ul>

<li>When normal mouse interaction is unreliable.</li>

<li>When the slider is hidden behind another UI layer.</li>

<li>When the application exposes a native range element.</li>

<li>When custom JavaScript events need to be triggered.</li>

<li>When coordinate-based interaction is unstable.</li>

</ul>

<hr>

<h2>45. Range Sliders</h2>

<p>A range slider allows the user to select two values, generally a minimum and maximum.</p>

<pre><code>Minimum Price: ₹1,000

Maximum Price: ₹10,000</code></pre>

<p>Range sliders generally contain two handles.</p>

<hr>

<h2>46. Range Slider Structure</h2>

<pre><code>Minimum Handle Maximum Handle

●-------------------------------●

| Track |

₹1000 ₹10000</code></pre>

<hr>

<h2>47. Automating Two-Handle Sliders</h2>

<p>For a two-handle slider, locate both handles separately.</p>

<pre><code>WebElement minHandle = driver.findElement(

By.cssSelector(".min-handle")

);

WebElement maxHandle = driver.findElement(

By.cssSelector(".max-handle")

);</code></pre>

<hr>

<h2>48. Moving the Minimum Handle</h2>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(minHandle)

.moveByOffset(80, 0)

.release()

.perform();</code></pre>

<hr>

<h2>49. Moving the Maximum Handle</h2>

<pre><code>actions.clickAndHold(maxHandle)

.moveByOffset(-80, 0)

.release()

.perform();</code></pre>

<hr>

<h2>50. Verifying Range Values</h2>

<pre><code>String minimum = minHandle.getAttribute("aria-valuenow");

String maximum = maxHandle.getAttribute("aria-valuenow");

System.out.println("Minimum: " + minimum);

System.out.println("Maximum: " + maximum);</code></pre>

<hr>

<h2>51. ARIA Attributes in Sliders</h2>

<p>Accessible custom sliders may expose values through ARIA attributes.</p>

<pre><code>aria-valuemin="0"

aria-valuemax="100"

aria-valuenow="50"

role="slider"</code></pre>

<p>These attributes can help Selenium identify and validate the current state of a custom slider.</p>

<hr>

<h2>52. Reading aria-valuenow</h2>

<pre><code>String currentValue = slider.getAttribute("aria-valuenow");

System.out.println("Current Value: " + currentValue);</code></pre>

<hr>

<h2>53. Reading aria-valuemin and aria-valuemax</h2>

<pre><code>String minimum = slider.getAttribute("aria-valuemin");

String maximum = slider.getAttribute("aria-valuemax");

System.out.println("Minimum: " + minimum);

System.out.println("Maximum: " + maximum);</code></pre>

<hr>

<h2>54. Validating ARIA Slider</h2>

<pre><code>Assert.assertEquals(

slider.getAttribute("role"),

"slider"

);

Assert.assertEquals(

slider.getAttribute("aria-valuemin"),

"0"

);</code></pre>

<hr>

<h2>55. Keyboard Accessibility Testing</h2>

<p>Sliders should also be tested for keyboard accessibility where the application supports it.</p>

<ul>

<li>Tab to focus the slider.</li>

<li>Use Arrow Right.</li>

<li>Use Arrow Left.</li>

<li>Verify the displayed value.</li>

</ul>

<hr>

<h2>56. Tab Navigation</h2>

<pre><code>slider.sendKeys(Keys.TAB);</code></pre>

<p>In a real test, the script should verify that the correct element receives focus rather than assuming the focus order.</p>

<hr>

<h2>57. Arrow Key Testing</h2>

<pre><code>slider.sendKeys(Keys.ARROW_RIGHT);

String value = slider.getAttribute("value");

System.out.println(value);</code></pre>

<hr>

<h2>58. Testing Slider Value Display</h2>

<p>Many applications display the selected value separately from the slider.</p>

<p>After moving the slider, validate both the slider value and the displayed text.</p>

<pre><code>String sliderValue = slider.getAttribute("value");

String displayedValue = valueLabel.getText();

Assert.assertEquals(displayedValue, sliderValue);</code></pre>

<hr>

<h2>59. Testing Dynamic Slider Results</h2>

<p>A slider may update another section of the page. For example, changing a price slider may refresh product results.</p>

<pre><code>slider.sendKeys(Keys.ARROW_RIGHT);

WebDriverWait wait = new WebDriverWait(

driver,

Duration.ofSeconds(10)

);

wait.until(ExpectedConditions.visibilityOfElementLocated(

By.cssSelector(".product-results")

));</code></pre>

<hr>

<h2>60. Slider with Apply Button</h2>

<p>Some filtering interfaces require the user to select a range and then click an Apply button.</p>

<pre><code>slider.sendKeys(Keys.ARROW_RIGHT);

WebElement applyButton = driver.findElement(

By.id("applyFilter")

);

applyButton.click();</code></pre>

<hr>

<h2>61. Slider with Explicit Wait</h2>

<p>Explicit waits are useful when changing a slider triggers asynchronous updates.</p>

<pre><code>WebDriverWait wait = new WebDriverWait(

driver,

Duration.ofSeconds(10)

);

wait.until(ExpectedConditions.elementToBeClickable(slider));</code></pre>

<hr>

<h2>62. Slider and Dynamic Web Elements</h2>

<p>When a slider causes content to refresh, the original element or result list may become stale. The automation should wait for the expected state rather than using fixed delays.</p>

<pre><code>slider.sendKeys(Keys.ARROW_RIGHT);

wait.until(ExpectedConditions.textToBePresentInElementLocated(

By.id("priceValue"),

"60"

));</code></pre>

<hr>

<h2>63. Avoiding Thread.sleep()</h2>

<p>Using <code>Thread.sleep()</code> for every slider operation can make tests slow and unreliable.</p>

<p>Prefer:</p>

<pre><code>WebDriverWait wait = new WebDriverWait(

driver,

Duration.ofSeconds(10)

);

wait.until(ExpectedConditions.elementToBeClickable(slider));</code></pre>

<hr>

<h2>64. Slider Inside a Modal</h2>

<p>If a slider appears inside a modal dialog, first ensure that the modal and slider are visible.</p>

<pre><code>WebElement slider = wait.until(

ExpectedConditions.visibilityOfElementLocated(

By.cssSelector(".modal input[type='range']")

)

);</code></pre>

<hr>

<h2>65. Slider Inside an iframe</h2>

<p>If the slider exists inside an iframe, Selenium must switch to the iframe before interacting with the slider.</p>

<pre><code>WebElement frame = driver.findElement(

By.cssSelector("iframe")

);

driver.switchTo().frame(frame);

WebElement slider = driver.findElement(

By.cssSelector("input[type='range']")

);

slider.sendKeys(Keys.ARROW_RIGHT);

driver.switchTo().defaultContent();</code></pre>

<hr>

<h2>66. Slider in Shadow DOM</h2>

<p>Some modern applications use Shadow DOM. Selenium 4 provides APIs for accessing shadow roots.</p>

<pre><code>WebElement host = driver.findElement(

By.cssSelector("custom-slider")

);

SearchContext shadowRoot = host.getShadowRoot();

WebElement slider = shadowRoot.findElement(

By.cssSelector("input[type='range']")

);</code></pre>

<hr>

<h2>67. Slider and StaleElementReferenceException</h2>

<p>If moving the slider causes the page to re-render the element, the previously stored WebElement may become stale.</p>

<p>A common solution is to locate the element again after the UI update.</p>

<pre><code>WebElement slider = driver.findElement(

By.id("priceSlider")

);

slider.sendKeys(Keys.ARROW_RIGHT);

slider = driver.findElement(

By.id("priceSlider")

);</code></pre>

<hr>

<h2>68. Slider and ElementNotInteractableException</h2>

<p>This exception can occur when the slider is not currently interactable.</p>

<p>Possible reasons include:</p>

<ul>

<li>Slider is hidden.</li>

<li>Slider is disabled.</li>

<li>Another element is covering it.</li>

<li>Page is still loading.</li>

<li>Slider requires scrolling into view.</li>

</ul>

<hr>

<h2>69. Scrolling to Slider</h2>

<pre><code>JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(

"arguments[0].scrollIntoView({block:'center'});",

slider

);</code></pre>

<hr>

<h2>70. Slider Page Object Model</h2>

<p>For framework-based Selenium projects, slider locators and actions should be placed inside a Page Object rather than duplicated across test classes.</p>

<pre><code>public class FilterPage {

private WebDriver driver;

private By priceSlider = By.id("priceSlider");

public FilterPage(WebDriver driver) {

this.driver = driver;

}

public void increasePrice() {

WebElement slider = driver.findElement(priceSlider);

slider.click();

slider.sendKeys(Keys.ARROW_RIGHT);

}

public String getPrice() {

return driver.findElement(priceSlider)

.getAttribute("value");

}

}</code></pre>

<hr>

<h2>71. Reusable Slider Utility Method</h2>

<pre><code>public static void moveSliderRight(

WebDriver driver,

By locator,

int numberOfSteps) {

WebElement slider = driver.findElement(locator);

slider.click();

for (int i = 0; i < numberOfSteps; i++) {

slider.sendKeys(Keys.ARROW_RIGHT);

}

}</code></pre>

<hr>

<h2>72. Reusable Slider Value Method</h2>

<pre><code>public static String getSliderValue(

WebDriver driver,

By locator) {

return driver.findElement(locator)

.getAttribute("value");

}</code></pre>

<hr>

<h2>73. Complete Selenium Slider Example</h2>

<pre><code>import java.time.Duration;

import org.openqa.selenium.By;

import org.openqa.selenium.Keys;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.ExpectedConditions;

import org.openqa.selenium.support.ui.WebDriverWait;

public class SliderTest {

public static void main(String[] args) {

WebDriver driver = new ChromeDriver();

try {

driver.manage().window().maximize();

driver.get("https://example.com");

WebDriverWait wait = new WebDriverWait(

driver,

Duration.ofSeconds(10)

);

WebElement slider = wait.until(

ExpectedConditions.elementToBeClickable(

By.id("volume")

)

);

slider.click();

slider.sendKeys(Keys.ARROW_RIGHT);

String value = slider.getAttribute("value");

System.out.println("Slider Value: " + value);

} finally {

driver.quit();

}

}</code></pre>

<hr>

<h2>74. TestNG Slider Test</h2>

<pre><code>import org.testng.Assert;

import org.testng.annotations.Test;

public class SliderTestNG {

@Test

public void verifySlider() {

WebElement slider = driver.findElement(

By.id("volume")

);

slider.click();

slider.sendKeys(Keys.END);

String value = slider.getAttribute("value");

Assert.assertEquals(value, "100");

}

}</code></pre>

<hr>

<h2>75. TestNG Slider Test Using Actions</h2>

<pre><code>@Test

public void moveSliderUsingMouse() {

WebElement slider = driver.findElement(

By.id("volume")

);

Actions actions = new Actions(driver);

actions.clickAndHold(slider)

.moveByOffset(100, 0)

.release()

.perform();

String value = slider.getAttribute("value");

System.out.println("Updated Value: " + value);

}</code></pre>

<hr>

<h2>76. Common Slider Exceptions</h2>

<tr><th>Exception</th><th>Possible Reason</th></tr>

<tr><td>ElementNotInteractableException</td><td>Element is hidden or disabled.</td></tr>

<tr><td>ElementClickInterceptedException</td><td>Another element is covering the slider.</td></tr>

<tr><td>StaleElementReferenceException</td><td>Slider was re-rendered.</td></tr>

<tr><td>NoSuchElementException</td><td>Incorrect locator or element not loaded.</td></tr>

<tr><td>TimeoutException</td><td>Expected condition was not achieved.</td></tr>

</table>

<hr>

<h2>77. Common Slider Automation Problems</h2>

<ul>

<li>Incorrect slider locator.</li>

<li>Using track instead of handle.</li>

<li>Incorrect drag offset.</li>

<li>Slider is outside the viewport.</li>

<li>Slider is covered by another element.</li>

<li>Application has not finished rendering.</li>

<li>Value changes asynchronously.</li>

<li>JavaScript events are not triggered.</li>

<li>Slider is inside an iframe.</li>

<li>Slider is implemented using Shadow DOM.</li>

</ul>

<hr>

<h2>78. Common Mistakes</h2>

<ul>

<li>Assuming every slider is an HTML range input.</li>

<li>Using fixed pixel offsets without understanding slider dimensions.</li>

<li>Not validating the final value.</li>

<li>Using JavaScript only to change the DOM without triggering application events.</li>

<li>Ignoring keyboard accessibility.</li>

<li>Using Thread.sleep() everywhere.</li>

<li>Not waiting for dynamic content after slider movement.</li>

<li>Not identifying the correct slider handle in a range slider.</li>

</ul>

<hr>

<h2>79. Best Practices for Slider Automation</h2>

<ul>

<li>Identify the implementation type before choosing an automation technique.</li>

<li>Prefer stable IDs or meaningful CSS selectors.</li>

<li>Use keyboard actions for native range inputs when appropriate.</li>

<li>Use Actions for realistic mouse interaction.</li>

<li>Use explicit waits for asynchronous updates.</li>

<li>Validate the resulting value instead of only validating movement.</li>

<li>Use ARIA attributes when working with accessible custom sliders.</li>

<li>Keep slider logic inside Page Objects in framework-based projects.</li>

<li>Avoid hard-coded coordinates whenever possible.</li>

<li>Test minimum, maximum, boundary, and intermediate values.</li>

</ul>

<hr>

<h2>80. Slider Testing vs Normal Element Testing</h2>

<tr><th>Normal Element</th><th>Slider</th></tr>

<tr><td>Usually click-based</td><td>May require drag or keyboard interaction</td></tr>

<tr><td>Simple state validation</td><td>Value and position validation</td></tr>

<tr><td>Coordinates usually unnecessary</td><td>Coordinates may be required</td></tr>

<tr><td>Less dependent on dimensions</td><td>Dimensions can affect movement</td></tr>

<tr><td>Usually straightforward</td><td>Can involve JavaScript and custom UI behavior</td></tr>

</table>

<hr>

<h2>81. Slider Test Scenarios</h2>

<ol>

<li>Verify slider is displayed.</li>

<li>Verify slider is enabled.</li>

<li>Verify minimum value.</li>

<li>Verify maximum value.</li>

<li>Verify default value.</li>

<li>Verify step value.</li>

<li>Move slider to the right.</li>

<li>Move slider to the left.</li>

<li>Move slider to minimum.</li>

<li>Move slider to maximum.</li>

<li>Verify keyboard control.</li>

<li>Verify mouse drag.</li>

<li>Verify displayed value.</li>

<li>Verify dependent content.</li>

<li>Verify range slider behavior.</li>

<li>Verify disabled state.</li>

<li>Verify boundary behavior.</li>

<li>Verify accessibility attributes.</li>

</ol>

<hr>

<h2>82. Negative Testing for Sliders</h2>

<p>Negative testing verifies that invalid or unsupported operations do not produce an incorrect application state.</p>

<ul>

<li>Try moving below minimum.</li>

<li>Try moving above maximum.</li>

<li>Verify disabled slider cannot be changed.</li>

<li>Verify invalid values are not accepted.</li>

<li>Verify incorrect range combinations are rejected.</li>

<li>Verify dependent results remain valid.</li>

</ul>

<hr>

<h2>83. E-Commerce Slider Example</h2>

<p>Price sliders are frequently used in e-commerce applications.</p>

<pre><code>Minimum Price: ₹500

Maximum Price: ₹5000

User selects:

₹1000 ----------- ₹3000

Expected Result:

Products between ₹1000 and ₹3000 should be displayed.</code></pre>

<p>Selenium should verify both slider values and the resulting product list.</p>

<hr>

<h2>84. Practical Mini Project: Product Price Filter</h2>

<p>Build an automated test for an e-commerce product filter.</p>

<pre><code>Launch E-Commerce Website

Open Product Category

Locate Price Slider

Move Minimum Handle

Move Maximum Handle

Click Apply

Wait for Product Results

Read Product Prices

Verify Every Price is Within Range

Generate Test Result</code></pre>

<hr>

<h2>85. Practical Validation Logic</h2>

<pre><code>int minPrice = 1000;

int maxPrice = 3000;

int productPrice = 2200;

Assert.assertTrue(

productPrice >= minPrice &&

productPrice <= maxPrice

);</code></pre>

<hr>

<h2>86. Interview Questions on Sliders</h2>

<h3>Q1. What is a slider in Selenium?</h3>

<p>A slider is a UI element that allows users to select or adjust a value by moving a handle along a track. Selenium can automate sliders using keyboard actions, the Actions class, or JavaScript depending on implementation.</p>

<h3>Q2. How do you handle an HTML range slider?</h3>

<p>A native range slider can often be handled using keyboard keys such as Arrow Right, Arrow Left, Home, and End.</p>

<h3>Q3. How do you move a slider using Actions?</h3>

<pre><code>Actions actions = new Actions(driver);

actions.clickAndHold(slider)

.moveByOffset(100, 0)

.release()

.perform();</code></pre>

<h3>Q4. How do you get the slider value?</h3>

<pre><code>String value = slider.getAttribute("value");</code></pre>

<h3>Q5. How do you handle a custom slider?</h3>

<p>Locate the slider handle or appropriate custom control and use mouse actions, keyboard interaction, or JavaScript according to how the component is implemented.</p>

<h3>Q6. What is the difference between a slider and a range slider?</h3>

<p>A normal slider generally has one handle and represents one value. A range slider generally has two handles and represents a minimum and maximum value.</p>

<h3>Q7. Why can pixel-based slider automation be unreliable?</h3>

<p>Because the relationship between pixel movement and slider value can change with browser size, responsive layout, zoom level, element dimensions, and custom component behavior.</p>

<h3>Q8. Can JavaScriptExecutor be used for sliders?</h3>

<p>Yes. JavaScriptExecutor can be used for native range elements or custom components when normal interaction is difficult, but application-specific input/change events may also need to be triggered.</p>

<h3>Q9. What attributes are useful for custom sliders?</h3>

<p>Attributes such as <code>role="slider"</code>, <code>aria-valuemin</code>, <code>aria-valuemax</code>, and <code>aria-valuenow</code> can be useful for identifying and validating accessible custom sliders.</p>

<h3>Q10. How do you test a price range slider?</h3>

<p>Move the minimum and maximum handles, apply the filter, wait for the results, and verify that displayed products satisfy the selected price range.</p>

<hr>

<h2>87. Quick Revision</h2>

<ul>

<li>Slider = UI control for selecting a value.</li>

<li>Native slider = usually <code>input[type='range']</code>.</li>

<li>Use <code>getAttribute("value")</code> to read a native slider value.</li>

<li>Use Arrow keys for precise keyboard movement.</li>

<li>Use Home for minimum where supported.</li>

<li>Use End for maximum where supported.</li>

<li>Use Actions for mouse-based sliders.</li>

<li>Use JavaScriptExecutor when appropriate.</li>

<li>Custom sliders may require handle-based interaction.</li>

<li>Range sliders usually have two handles.</li>

<li>ARIA attributes can help validate custom sliders.</li>

<li>Use explicit waits for dynamic results.</li>

<li>Always validate the final state.</li>

</ul>

<hr>

<h2>88. Slider Automation Checklist</h2>

<tr><th>Check</th><th>Status</th></tr>

<tr><td>Identify slider type</td><td>Required</td></tr>

<tr><td>Identify reliable locator</td><td>Required</td></tr>

<tr><td>Verify minimum value</td><td>Required</td></tr>

<tr><td>Verify maximum value</td><td>Required</td></tr>

<tr><td>Verify default value</td><td>Recommended</td></tr>

<tr><td>Verify step value</td><td>Recommended</td></tr>

<tr><td>Test keyboard interaction</td><td>Recommended</td></tr>

<tr><td>Test mouse interaction</td><td>Required where supported</td></tr>

<tr><td>Validate resulting value</td><td>Required</td></tr>

<tr><td>Validate dependent UI</td><td>Required when applicable</td></tr>

<tr><td>Test boundary conditions</td><td>Required</td></tr>

<tr><td>Handle dynamic updates</td><td>Required when applicable</td></tr>

<tr><td>Use Page Object Model</td><td>Recommended for frameworks</td></tr>

</table>

<hr>

<h2>89. Real-World Slider Automation Architecture</h2>

<pre><code>Test Class

Page Object

Slider Utility

+----------------------+

| |

v v

Keyboard Interaction Actions Class

| |

+----------+-----------+

Slider Component

Application State

Validation

Report</code></pre>

<hr>

<h2>90. Final Conclusion</h2>

<p>Sliders are important interactive web elements that require a different automation strategy from ordinary buttons, text boxes, and links. Selenium WebDriver can automate native HTML sliders using keyboard actions and can handle many custom sliders using the Actions class, JavaScriptExecutor, ARIA attributes, and appropriate synchronization techniques.</p>

<p>The most important part of slider automation is not simply moving the slider. A robust automation test should verify the selected value, minimum and maximum boundaries, step behavior, keyboard accessibility, dynamic results, and the final application state. For custom sliders, testers should understand whether the implementation uses a handle, track, JavaScript events, ARIA attributes, iframe, or Shadow DOM before selecting an automation technique.</p>

<p>For larger Selenium projects, slider handling should be implemented through Page Object Model classes and reusable utility methods so that tests remain maintainable, readable, and stable.</p>

<hr>

<h2>91. Selenium Learning Resource</h2>

<p>To learn Selenium WebDriver, Java automation, TestNG, Page Object Model, data-driven testing, cross-browser testing, automation frameworks, and practical Selenium projects, explore the <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">Selenium Training Course</a>.</p>

<p>For course enquiries and demo registration, visit <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a>.</p>

</div>

Popular Searches

Popular Course Categories

Popular Courses

Curriculum

Introduction to Software Testing

Introduction to Selenium

Selenium Environment Setup

WebDriver Fundamentals

HTML & Web Elements

Selenium Locators

XPath in Selenium

Working with Web Elements

Waits in Selenium

Handling Browser Components

Dropdowns & Advanced Elements

Mouse & Keyboard Actions

JavaScript with Selenium

Selenium with Python

Selenium with Java

Test Automation Framework

TestNG / PyTest

Page Object Model

Data-Driven Testing

Selenium Grid

Advanced Selenium

Screenshots & Reporting

API & Database Integration

Selenium with CI/CD

Real-World Selenium Projects

Job Preparation

Sliders

+91-9987184296